import {React,Component} from "react";
import '../assets/css/from.css'
// import styled from 'styled-component'
class From1 extends Component {
    constructor(props) {
        super(props);
    }
    state = { 
        title:'',
        city:'',
        choice:[
            {
                cities:"北京"
            },
            {
                cities:"上海"
            },
            {
                cities:"广州"
            },
            {
                cities:"河北"
            },
            {
                cities:"深圳"
            }
        ],
        time:'',
        endTime:'',
        tel:'',
        occupation:'',
        describe:''
    }
    // 活动名称
    inputChange=(e)=> {
        let val = e.target.value
        this.setState({
            title: val
        })
    }
    // 城市
    selectChange=(e)=>{
        let val = e.target.value
        console.log(val);
        this.setState({
            cities:val
        })
    }
    // 开始日期
    dateChange = (e) => {
        const val = e.target.value
        console.log(e);
        this.setState({
            time:val
        })
    }
    // 结束日期
    datesChange = (e) => {
        const val = e.target.value
        console.log(e);
        this.setState({
            endTime:val
        })
    }
    // 电话
    telChange = (e) => {
        const val = e.target.value
        this.setState({
            tel:val
        })
    }
    // 职业
    occupChange = (e) => {
        const val = e.target.value
        this.setState({
            occupation:val
        })
    }
    // 描述
    descChange = (e) => {
        const val = e.target.value
        this.setState({
            describe:val
        })
    }
    // 提交
    add = () => {
        // console.log('活动名称 ---',this.state.title);
        // console.log('城市 ---',this.state.cities);
        // console.log('开始时间 ---',this.state.time);
        // console.log('结束时间 ---',this.state.endTime);
        // console.log('报名电话---',this.state.tel);
        // console.log('目前职业 ---',this.state.occupation);
        // console.log('描述 ---',this.state.describe);
        console.log(this.state);
    }
    ssd = () => {
        this.setState({
            tel:''
        })
    }
    render() { 
        function on_off() {
            console.log(getComputedStyle(document.querySelector('#label'), ':after').getPropertyValue('content'));
        }
        return (
            <div className="froms">
                <from className="from">
                    <div className="line">
                        <label><span>* </span>活动名称</label>
                        <input readonly="readonly" placeholder="前端前景技术发展交流" className="activity" type="text" onChange={this.inputChange.bind(this)}/>  
                    </div>
                    <div className="line">
                        <label><span>* </span>城市</label>
                        <select value={this.state.choice.cities} onChange={this.selectChange} className="city" defaultValue>
                            {
                                this.state.choice.map((item,index) => (
                                    <option key={index}>{item.cities}</option>
                                ))
                            }
                        </select>
                    </div>
                    <div className="line">
                        <label><span>* </span>日期</label>
                        <input className="times" onChange={this.dateChange} type="date"/> - <input className="times" onChange={this.datesChange} type="date"/>  
                    </div>
                    <div className="line">
                        <label><span>* </span>报名电话</label>
                        <input className="tel" onChange={this.telChange.bind(this)} type="text"/>  
                    </div>
                    <div className="line">
                        <label>允许电话沟通</label>
                        <input type="checkbox" id="my_switch" className="my_switch" onClick={on_off}/>
                        <label id="label" htmlFor="my_switch"></label>  
                    </div>
                    <div className="line">
                        <label><span>* </span>目前职业</label>
                        <input onChange={this.occupChange.bind(this)} className="occupation" type="text"/>  
                    </div>
                    <div className="line">
                        <label><span>* </span>活动类型</label>
                        <input className="multiple" type="checkbox"/>线上活动
                        <input className="multiple" type="checkbox"style={{marginLeft:'20px'}}/>推广类
                        <input className="multiple" type="checkbox" style={{marginLeft:'20px'}}/>线下活动
                        <input className="multiple" type="checkbox" style={{marginLeft:'115px'}}/>品牌介绍
                    </div>
                    <div className="line">
                        <label><span>* </span>活动赞助商</label>
                        <input className="radio" type="radio"/>淘宝
                        <input className="radio" type="radio" style={{marginLeft:'50px'}}/>京东
                    </div>
                    <div className="line">
                        <label><span>* </span>描述</label>
                        <input onChange={this.descChange.bind(this)} className="describe" type="text"/>
                    </div>
                    <div>
                        <button onClick={this.add} style={{backgroundColor:'#4099f4',border:'none',width:'60px',height:'35px',borderRadius:'6px',cursor:'pointer',color:'#fff',marginLeft:'115px'}}>提交</button>
                        <button onClick={this.ssd} style={{backgroundColor:'#ffffff',border:'1px solid #d3d6dc',width:'60px',height:'35px',borderRadius:'6px',cursor:'pointer',marginLeft:'20px'}}>重置</button>
                    </div>
                </from>
            </div>
        );
    }
}

export default From1;